<template>
	<div>
		<view class="wrap paddingBottom">
			<view class="wrpa-mine-info">
				<block v-if="isTeam === true">
					<view class="item">
						<view class="left">团队名称</view>
				
						<input class="value" v-model="dataInfo.team" placeholder="请输入" placeholder-class="place" />
					</view>
				
					<view class="item">
						<view class="left">所属院校</view>
				
						<input class="value" v-model="dataInfo.academy" placeholder="请输入" placeholder-class="place" />
					</view>
					
					<view class="item">
						<view class="left">企业名称</view>
					
						<input class="value" v-model="dataInfo.enterpriseTitle" placeholder="请输入" placeholder-class="place" />
					</view>
					
					<view class="item">
						<view class="left">职位</view>
					
						<input class="value" v-model="dataInfo.position" placeholder="请输入" placeholder-class="place" />
					</view>
				</block>
				
				<view class="item">
					<view class="left">姓名</view>

					<input class="value" v-model="dataInfo.name" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">性别</view>

					<picker mode="selector" :range="sex_list" @change="onSex">
						<view class="value">
							<view class="value value2">
								<text class="place" v-if="dataInfo.sex === ''">请选择</text>
								<text>{{ dataInfo.sex }}</text>
							</view>

							<image class="arrow" src="/static/images/arrow.png" />
						</view>
					</picker>
				</view>

				<view class="item">
					<view class="left">身份证号码</view>

					<input
						class="value"
						maxlength="18"
						type="idcard"
						v-model="dataInfo.idCard"
						placeholder="请输入"
						placeholder-class="place"
					/>
				</view>

				<view class="item">
					<view class="left">手机号</view>

					<input
						class="value"
						v-model="dataInfo.phone"
						type="tel"
						maxlength="11"
						placeholder="请输入"
						placeholder-class="place"
					/>
				</view>

				<view class="item">
					<view class="left">邮箱</view>

					<input class="value" v-model="dataInfo.email" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">地址</view>

					<input class="value" v-model="dataInfo.address" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">衣服尺码</view>

					<input class="value" v-model="dataInfo.size" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">血型</view>

					<input class="value" v-model="dataInfo.blood" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">紧急联系人姓名</view>

					<input
						class="value"
						v-model="dataInfo.urgent_name"
						placeholder="请输入"
						placeholder-class="place"
					/>
				</view>

				<view class="item">
					<view class="left">紧急联系人电话</view>

					<input
						class="value"
						v-model="dataInfo.urgent_phone"
						maxlength="11"
						type="tel"
						placeholder="请输入"
						placeholder-class="place"
					/>
				</view>

				<view class="physical-bg">
					<view class="title">体检报告</view>

					<view class="img-bg" @click="onChooseImage(0)">
						<image
							v-if="dataInfo.examinationReport === ''"
							class="add"
							src="/static/images/upload_add.png"
						/>
						<image v-else class="img" :src="getImageURL(dataInfo.examinationReport)" />
					</view>
				</view>
				
				<view class="other-bg" v-if="isTeam === true">
					<view class="title-bg">
						<text>创业项目资料</text>
						<text>（非必填）</text>
					</view>
				
					<view class="sub-title">
						报名创业大赛的选手请提交创业项目资料
					</view>
				
					<view class="img-bg" @click="onChooseImage(1)">
						<image v-if="dataInfo.projectInfo === ''" class="add" src="/static/images/upload_add.png" />
						<image v-else class="img" :src="getImageURL(dataInfo.projectInfo)" />
					</view>
				</view>
			</view>
		</view>

		<view class="footer safe-area">
			<view class="btn" @click="onSubmit">提交</view>
		</view>
	</div>
</template>

<script>
	import { uploadData, getMineInfoData, changeUserInfoData } from "@/utils/api";
	export default {
		data() {
			return {
				sex_list: ["男", "女"],
				isTeam: false,
				dataInfo: {
					academy: "",
					address: "",
					avatar: "",
					blood: "",
					email: "",
					examinationReport: "",
					idCard: "",
					name: "",
					nickname: "",
					phone: "",
					projectInfo: "",
					sex: "",
					size: "",
					team: "",
					urgent_name: "",
					urgent_phone: "",
					academy: "", 
					team: "",
					projectInfo: "",
					enterpriseTitle: "",
					position: "",
				},
			};
		},
		mounted() {
			this.getData();
		},
		methods: {
			/**
			 * 选择图片
			 */
			onChooseImage(index) {
				uni.chooseImage({
					count: 1,
					success:res => {
						this.uploadImageData(res.tempFilePaths[0], index)
					}
				})
			},
			//上传图片
			uploadImageData(file, index) {
				uploadData(file).then(res => {
					if (index === 0) {
						this.dataInfo.examinationReport = res.data.url;
					} else {
						this.dataInfo.projectInfo = res.data.url;
					}
				})
			},
			/**
			 * 提交
			 */
			onSubmit() {
				if (this.dataInfo.team === "" && this.isTeam === true) {
					this.$st.show("请输入团队名称")
					return;
				}
				if (this.dataInfo.academy === "" && this.isTeam === true) {
					this.$st.show("请输入所属院校")
					return;
				}
				if (this.dataInfo.enterpriseTitle === "" && this.isTeam === true) {
					this.$st.show("请输入企业名称")
					return;
				}
				if (this.dataInfo.position === "" && this.isTeam === true) {
					this.$st.show("请输入职位")
					return;
				}
				if (this.dataInfo.name === "") {
					this.$st.show("请输入姓名")
					return;
				}
				if (this.dataInfo.sex === '') {
					this.$st.show("请选择性别")
					return;
				}
				if (this.dataInfo.idCard === "") {
					this.$st.show("请输入身份证号码")
					return;
				}
				if (this.dataInfo.phone === "") {
					this.$st.show("请输入手机号")
					return;
				}
				if (this.dataInfo.email === "") {
					this.$st.show("请输入邮箱")
					return;
				}
				if (this.dataInfo.address === "") {
					this.$st.show("请输入地址")
					return;
				}
				if (this.dataInfo.size === "") {
					this.$st.show("请输入衣服尺码")
					return;
				}
				if (this.dataInfo.blood === "") {
					this.$st.show("请输入血型")
					return;
				}
				if (this.dataInfo.urgent_name === "") {
					this.$st.show("请输入紧急联系人姓名")
					return;
				}
				if (this.dataInfo.urgent_phone === "") {
					this.$st.show("请输入紧急联系人电话")
					return;
				}
				if (this.dataInfo.examinationReport === "") {
					this.$st.show("请上传体检报告")
					return;
				}
				changeUserInfoData(this.dataInfo).then((res) => {
					this.$st.success("修改成功");
					this.getData();
				});
			},
			/**
			 * 网络请求
			 */
			getData() {
				getMineInfoData().then((res) => {
					this.dataInfo = res.data;
					this.isTeam = this.dataInfo.team === "" ? false : true;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 140rpx;
		width: 100%;
		overflow: hidden;
	}
	.wrpa-mine-info {
		width: 100%;
		overflow: hidden;
		background-color: white;
		padding: 0 30rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			overflow: hidden;
			height: 110rpx;
			border-bottom: 2rpx solid #e5e5e5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}

			.value {
				width: 450rpx;
				height: 60rpx;
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #333333;
				font-size: 30rpx;
			}

			/deep/ .place {
				color: #999999;
			}

			.value2 {
				flex: 1 !important;
			}

			.arrow {
				margin-left: 14rpx;
				width: 12rpx;
				height: 22rpx;
			}
		}

		.physical-bg {
			padding: 40rpx 0rpx;
			width: 100%;
			overflow: hidden;

			.title {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.img-bg {
			margin-top: 30rpx;
			width: 182rpx;
			height: 182rpx;
			background-color: #f6f6f6;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			.add {
				width: 44rpx;
				height: 44rpx;
			}

			.img {
				width: 100%;
				height: 100%;
			}
		}
		
		.other-bg {
			border-top: 2rpx solid #E5E5E5;
			width: 100%;
			padding: 40rpx 0;
			overflow: hidden;
		
			.title-bg {
				width: 100%;
				overflow: hidden;
				display: flex;
				align-items: baseline;
		
				.aa {
					color: #333333;
					font-size: 30rpx;
					font-weight: bold;
				}
		
				.bb {
					margin-left: 8rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}
		
			.sub-title {
				margin-top: 24rpx;
				color: #999999;
				font-size: 24rpx;
			}
		
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 116rpx;
		background-color: white;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #ea5520;
			border-radius: 40rpx;
			overflow: hidden;
			color: white;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	view {
		line-height: 1;
	}
</style>
